 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="Pragma" content="no-cache">
        <title>alphaTab - Demo</title>
		<!-- Dependencies -->
		<!--[if IE]><script language="JavaScript" type="text/javascript" src="lib/swfobject/swfobject.js"></script><![endif]-->
		<!--[if IE]><script language="JavaScript" type="text/javascript" src="lib/excanvas/excanvas.js"></script><![endif]-->

		<script language="JavaScript" type="text/javascript" src="lib/jquery/jquery.min.js"></script>
		
		<!-- alphaTab -->
		<script language="JavaScript" type="text/javascript" src="lib/alphaTab/alphaTab.js"></script>
		<script language="JavaScript" type="text/javascript" src="lib/alphaTab/jquery.alphaTab.js"></script>
        <style type="text/css">@import url('style.css');</style>
        <style type="text/css">@import url('alphaTab.css');</style>

    </head>
	<body>
		<div id="TopNavWrapper">
			<div id="TopNav">
				<a href="http://www.alphatab.net" id="AlphaTabLogo" title="Home"></a>
				<ul>
				</ul>
			</div>
		</div>

		<div id="Content">
		<h1>alphaTab - Extended</h1>
				<a href="index.php">Back</a>
				
		<p>This extended sample shows up different features like file loading and zoom adjustments.</p>
		 
<script language="JavaScript" type="text/javascript"> 
$(document).ready(function() { 
	var api = $('div.alphaTab').alphaTab({
		loadCallback: function(song) {
			var tracks = $('#Tracks');
			tracks.find('option').remove();
			for(var i = 0; i < song.tracks.length; i++) 
			{
				var elm = $('<option value="'+i+'">'+song.tracks[i].name+'</option>');
				if(i == 0)
				{
					elm.attr("selected", "selected");
				}	
				tracks.append(elm);
			}
		}
	});
	
	// initialize button events
	$('#LoadSample').click(function(){
		var testFile = $('#TestFile :selected').val();
		api.loadFile(testFile);
    }); 
	$('#Zoom').change(function(){
		var zoomlvl = parseFloat($('#Zoom :selected').val());
		api.tablature.updateScale(zoomlvl);
	});  
	$('#UpdateTrack').click(function() { 
		var index = parseInt($('#Tracks :selected').val());
		api.tablature.setTrack(api.tablature.track.song.tracks[index]);
	});
});
</script>
<!-- File List -->
<select id="TestFile">
	<option value="files/GuitarPro6Jingle.gpx">Guitar Pro 6 Jingle(Gpx)</option>

	<option value="files/FadeToBlack.gp4">Metallica - Fade To Black (Gp4)</option>
	<option value="files/Canon.gp5">JerryC - CanonRock (Gp5)</option>
	<option value="files/Serenade.gp5">Suidakra - Serenade to a Dream (Gp5)</option>
	<option value="files/Effects.gp5">Effects (Gp5)</option>
</select>
<input id="LoadSample" type="button" value="Load" />
| 

<!-- Tracks -->
<label for="Tracks">Tracks:</label>

<select id="Tracks">
</select>
<input id="UpdateTrack" type="button" value="Show" />
|

<!-- Zoom -->
<select id="Zoom">
	<option value="0.5">50%</option>
	<option value="0.75">75%</option>
	<option value="1.0">100%</option>
	<option value="1.1" selected="selected">110%</option>

	<option value="1.25">125%</option>
	<option value="1.5">150%</option>
	<option value="2.0">200%</option>
</select>

<br />


<div class="alphaTab"></div>				<h2>Source</h2>

		<code>&lt;script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;&gt; 
$(document).ready(function() { 
	var api = $('div.alphaTab').alphaTab({
		loadCallback: function(song) {
			var tracks = $('#Tracks');
			tracks.find('option').remove();
			for(var i = 0; i &lt; song.tracks.length; i++) 
			{
				var elm = $('&lt;option value=&quot;'+i+'&quot;&gt;'+song.tracks[i].name+'&lt;/option&gt;');
				if(i == 0)
				{
					elm.attr(&quot;selected&quot;, &quot;selected&quot;);
				}	
				tracks.append(elm);
			}
		}
	});
	
	// initialize button events
	$('#LoadSample').click(function(){
		var testFile = $('#TestFile :selected').val();
		api.loadFile(testFile);
    }); 
	$('#Zoom').change(function(){
		var zoomlvl = parseFloat($('#Zoom :selected').val());
		api.tablature.updateScale(zoomlvl);
	});  
	$('#UpdateTrack').click(function() { 
		var index = parseInt($('#Tracks :selected').val());
		api.tablature.setTrack(api.tablature.track.song.tracks[index]);
	});
});

&lt;/script&gt;
&lt;!-- File List --&gt;
&lt;select id=&quot;TestFile&quot;&gt;
	&lt;option value=&quot;files/GuitarPro6Jingle.gpx&quot;&gt;Guitar Pro 6 Jingle(Gpx)&lt;/option&gt;
	&lt;option value=&quot;files/FadeToBlack.gp4&quot;&gt;Metallica - Fade To Black (Gp4)&lt;/option&gt;

	&lt;option value=&quot;files/Canon.gp5&quot;&gt;JerryC - CanonRock (Gp5)&lt;/option&gt;
	&lt;option value=&quot;files/Serenade.gp5&quot;&gt;Suidakra - Serenade to a Dream (Gp5)&lt;/option&gt;
	&lt;option value=&quot;files/Effects.gp5&quot;&gt;Effects (Gp5)&lt;/option&gt;

&lt;/select&gt;
&lt;input id=&quot;LoadSample&quot; type=&quot;button&quot; value=&quot;Load&quot; /&gt;
| 

&lt;!-- Tracks --&gt;

&lt;label for=&quot;Tracks&quot;&gt;Tracks:&lt;/label&gt;
&lt;select id=&quot;Tracks&quot;&gt;
&lt;/select&gt;
&lt;input id=&quot;UpdateTrack&quot; type=&quot;button&quot; value=&quot;Show&quot; /&gt;

|

&lt;!-- Zoom --&gt;
&lt;select id=&quot;Zoom&quot;&gt;
	&lt;option value=&quot;0.5&quot;&gt;50%&lt;/option&gt;
	&lt;option value=&quot;0.75&quot;&gt;75%&lt;/option&gt;

	&lt;option value=&quot;1.0&quot;&gt;100%&lt;/option&gt;
	&lt;option value=&quot;1.1&quot; selected=&quot;selected&quot;&gt;110%&lt;/option&gt;
	&lt;option value=&quot;1.25&quot;&gt;125%&lt;/option&gt;

	&lt;option value=&quot;1.5&quot;&gt;150%&lt;/option&gt;
	&lt;option value=&quot;2.0&quot;&gt;200%&lt;/option&gt;
&lt;/select&gt;

&lt;br /&gt;


&lt;div class=&quot;alphaTab&quot;&gt;&lt;/div&gt;</code>
		    </body>
</html>				
				
